<template>
  <div id="app">
    <mapbox
      :access-token="accessToken"
      :map-options="mapOptions"
      :fullscreen-control="{
        show: true,
        position: 'top-left',
      }"
      :attribution-control="{
        show: true,
        position: 'top-left',
      }"
      :nav-control="{
        show: true,
        position: 'top-left',
      }"
      @map-load="loaded"
      @map-init="mapInitialized"
      @map-click="clicked"
      @map-dragend="dragEnded"
    />
    <!-- @map-mouseenter:points="mouseEntered"
    @map-mouseleave:points="mouseLeaved"-->
    <div class="databtn">
      <button v-on:click="mapdataChange">视角切换</button>
      <button v-on:click="layerdataChange">新图层</button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import Mapbox from 'mapbox-gl-vue';
import PopupContent from './PopupContent.vue';

import {
  ScatterplotLayer,
  IconLayer,
  LineLayer,
  PathLayer,
  PolygonLayer,
  GeoJsonLayer
} from "@deck.gl/layers";
import { MapboxLayer } from "@deck.gl/mapbox";
import MapboxLanguage from "@mapbox/mapbox-gl-language";

var popup, geojson0;


//oldVal
const pointsJson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        description: "这是1号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52760990726458, 31.219358305273758]
      },
      id: "1b4052fd-7fd4-4f80-9c9f-bcf5862f8e1c"
    },
    {
      type: "Feature",
      properties: {
        description: "这是2号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52875562478451, 31.219218332993673]
      },
      id: "0f04e923-c465-4050-bc78-e68f7052ab74"
    },
    {
      type: "Feature",
      properties: {
        description: "这是8号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.5285763628595, 31.220331440158212]
      },
      id: "f63cd86a-234a-4062-be4b-73d5b550bca6"
    },
    {
      type: "Feature",
      properties: {
        description: "这是3号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52983899033053, 31.21887839945073]
      },
      id: "1af2bb24-572c-456d-8f67-0ff56e5c9c4f"
    },
    {
      type: "Feature",
      properties: {
        description: "这是4号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52701756351293, 31.219844873968245]
      },
      id: "ab1241e6-5c25-4180-8ed7-a24f206e9020"
    }
  ]
};

//newVal
const pointsNew = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        description: "<div>这是1号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52760990726458, 31.219358305273758]
      },
      id: "1b4052fd-7fd4-4f80-9c9f-bcf5862f8e1c"
    },
    {
      type: "Feature",
      properties: {
        description: "<div>这是2号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52875562478451, 31.219218332993673]
      },
      id: "0f04e923-c465-4050-bc78-e68f7052ab74"
    },
    {
      type: "Feature",
      properties: {
        description: "<div>这是8号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.5285763628595, 31.220331440158212]
      },
      id: "f63cd86a-234a-4062-be4b-73d5b550bca6"
    },
    {
      type: "Feature",
      properties: {
        description: "<div>这是3号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52983899033053, 31.21887839945073]
      },
      id: "1af2bb24-572c-456d-8f67-0ff56e5c9c4f"
    },
    {
      type: "Feature",
      properties: {
        description: "<div>这是4号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52701756351293, 31.219844873968245]
      },
      id: "ab1241e6-5c25-4180-8ed7-a24f206e9020"
    }
  ]
};

//mapbox-oldVal
const collectLayer = {
  id: 'points',
  type: 'circle',
  source: {
    type: 'geojson',
    data: {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
          "description": "<div>这是1号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52760990726458, 31.219358305273758]
        },
        "id": "1b4052fd-7fd4-4f80-9c9f-bcf5862f8e1c"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是2号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52875562478451, 31.219218332993673]
        },
        "id": "0f04e923-c465-4050-bc78-e68f7052ab74"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是8号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.5285763628595, 31.220331440158212]
        },
        "id": "f63cd86a-234a-4062-be4b-73d5b550bca6"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是3号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52983899033053, 31.21887839945073]
        },
        "id": "1af2bb24-572c-456d-8f67-0ff56e5c9c4f"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是4号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52701756351293, 31.219844873968245]
        },
        "id": "ab1241e6-5c25-4180-8ed7-a24f206e9020"
      }]
    }
  },
  paint: {
    'circle-color': '#CC0000',
  }
}

//mapbox-newVal
const collectLayer1 = {
  id: 'points1',
  type: 'circle',
  source: {
    type: 'geojson',
    data: {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
          "description": "<div>这是1号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52760990726458, 31.219358305273758]
        },
        "id": "1b4052fd-7fd4-4f80-9c9f-bcf5862f8e1c"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是2号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52875562478451, 31.219218332993673]
        },
        "id": "0f04e923-c465-4050-bc78-e68f7052ab74"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是8号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.5285763628595, 31.220331440158212]
        },
        "id": "f63cd86a-234a-4062-be4b-73d5b550bca6"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是3号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52983899033053, 31.21887839945073]
        },
        "id": "1af2bb24-572c-456d-8f67-0ff56e5c9c4f"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是4号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52701756351293, 31.219844873968245]
        },
        "id": "ab1241e6-5c25-4180-8ed7-a24f206e9020"
      }]
    }
  },
  paint: {
    'circle-color': '#111111',
  }
}

export default {
  components: { Mapbox },
  mounted() {

  },
  methods: {
    mapInitialized(map) {
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      map.addControl(language);
    },
    loaded(map) {
      this.map = map;
      popup = new mapboxgl.Popup({
        closeButton: false,
        closeOnClick: false,
        // className: 'text-pop'
      });


      geojson0 = new MapboxLayer({
        id: 'points',
        type: GeoJsonLayer,
        data: pointsJson,
        pickable: true,
        stroked: true,
        filled: true,
        getFillColor: [255, 0, 0, 255],
        getRadius: 3,
        getLineWidth: 0,
        autoHighlight: true,
        onClick: ({ object, x, y }) => {
          console.log('objecct:' + object)
          if (!object) {
            popup.remove();
            return
          } else {
            const description = object["properties"]["description"];
            const coordinates = object.geometry.coordinates.slice();
            popup.setHTML(description)
              .setLngLat(coordinates)
              .addTo(map);
          }
        }
        // onClick: this.handleClick.bind(this)
      });

      //map.addLayer(geojson0);
      this.initLayer();



      map.on('mouseenter', 'points', function (map, e) {
        // this.map.getCanvas().style.cursor = 'pointer';
        console.log(map, e)
        var coordinates = e.features[0].geometry.coordinates.slice();
        var description = e.features[0].properties.description;
        popup.setHTML(description)
          .setLngLat(coordinates)
          .addTo(map);
      })

      console.log(map.getBounds());
    },
    clicked(map, e) {
      console.log(map, e);
    },
    mouseEntered(map, e) {
      map.getCanvas().style.cursor = 'pointer';
      var coordinates = e.features[0].geometry.coordinates.slice();
      var description = e.features[0].properties.description;
      popup.setHTML(description)
        .setLngLat(coordinates)
        .addTo(map);
    },
    mouseLeaved(map, e) {
      map.getCanvas().style.cursor = '';
      popup.remove();
    },
    dragEnded(map, e) {
      console.log('bounds:' + map.getBounds());
      console.log('zoom:' + map.getZoom());
      console.log('center:' + map.getCenter());
    },
    initLayer() {
      this.map.on('load', () => {
        this.map.addLayer(collectLayer);
      })
    },
    cleanLayer() {
      this.map.removeLayer(collectLayer.id);
    },
    renderLayer() {

    },
    mapdataChange() {
      this.cleanLayer();
      this.mapOptions = {
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [121.52818512199894, 31.219762802137353],
        zoom: 18,
        minZoom: 18,
        trackResize: true,
        dragRotate: false,
        scrollZoom: { around: "center" },
        maxBounds: [
          [121.52651211524676, 31.21869543823186],
          [121.52989318456565, 31.22068610168914]
        ]
      }
    },
    layerdataChange() {
      this.layerData = [
        collectLayer1
      ]
    }
  },
  data() {
    return {
      accessToken: 'pk.eyJ1IjoiamltbXkwMDkiLCJhIjoiY2swNHl2M3owMGl2bzNja2F3emk0OWxvaiJ9.cIYfwmmCkLoyQseAEI6UzQ',
      mapOptions: {
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [121.529, 31.219],
        zoom: 16,
        minZoom: 16,
        trackResize: true,
        dragRotate: false,
        scrollZoom: { around: "center" },
        maxBounds: [
          [121.52276653529157, 31.2153298410133],
          [121.5352334647107, 31.22267001650556]
        ]
      },
      layerData: [
        collectLayer
      ],
      layerID: 'points',
      //自定义pop参数
      popShow: false,
      popX: 0,
      popY: 0,
      describe: '',
    }
  },
  watch: {
    mapOptions: {
      deep: true,
      handler(newVal, oldVal) {
        this.map.jumpTo({
          center: [121.52818512199894, 31.219762802137353],
          zoom: 18
        });
        this.map.setMaxBounds([
          [121.52633621364714, 31.218664270518573],
          [121.53006021886114, 31.22085684183915]
        ])
      }
    },
    layerData: {
      deep: true,
      handler(newVal, oldVal) {
        console.log(oldVal, newVal)
        this.map.removeLayer(oldVal[0].id);
        this.map.addLayer(newVal[0]);
        this.layerID = newVal[0].id;
      }
    }
  }
}
</script>

<style>
@import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css");

#app {
  width: 100%;
  height: 100%;
}
/* .text-pop {
  background-color: rgba(0, 0, 0, 0.6);
  color: #f6f6f6;
  font-size: 12px;
  text-align: center;
  width: 100px;
  border-radius: 6px;
  padding: 10px 5px;
  position: relative;
  top: -30px;
} */
.databtn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
</style>